<template lang="">
  <div>
    <div><img src="../../images/图层 2.png" /></div>
    <div class="back">
      <div class="cert">
        <div class="information">填写个人信息</div>
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="公司名称"
            required
            label="公司名称 : "
            placeholder="川艺联盟教育机构"
            :rules="[{ required: true, message: '公司名称' }]"
          />
          <van-field
            readonly
            v-model="password"
            name="社会信用代码"
            required
            label="社会信用代码 : "
            placeholder="513698199812122145"
            :rules="[{ required: true, message: '请填写社会信用代码' }]"
          />
          <van-field
            readonly
            v-model="password"
            name="联系电话"
            label="联系电话 : "
            required
            placeholder="18325987452"
            :rules="[{ required: true, message: '请填写联系电话' }]"
          />
          <!-- <van-field type="selected" /> -->
          <van-field
            required
            readonly
            clickable
            name="picker"
            :value="value"
            label="专业"
            placeholder="点击选择专业"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field name="radio" label="身份选择" required>
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">单选框 1</van-radio>
                <van-radio name="2">单选框 2</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="所在单位" required>
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">单选框 1</van-radio>
                <van-radio name="2">单选框 2</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="username"
            name="单位名称"
            required
            label="单位名称 : "
            placeholder="川艺联盟教育机构"
            :rules="[{ required: true, message: '单位名称' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit"
              >注册</van-button
            >
          </div>
        </van-form>
        <div class="pull">
          *你所填信息将用于后台审核不会用于其他用途，请如实填写
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'professional'
}
</script>
<style>
.back {
  height: 580px;
  background: linear-gradient(#fe7003, #ffb202); /* 标准的语法 */
}
.cert {
  width: 345px;
  height: 520px;
  /* border: 1px solid #000; */
  background-color: #fefefc;
  /* padding-right: 15px;
  padding-left: 15px; */
  box-sizing: border-box;
  margin-left: 15px;
  border-radius: 10px;
}
.information {
  font-size: 17px;
  text-align: center;
  padding-top: 25px;
  background: url("../../images/矩形 2.png") no-repeat bottom;
}
.van-cell::after {
  border: 0;
}
.van-button--info {
  background-color: #fe7003;
  border: 1px solid #fe7003;
}
.van-cell {
  font-size: 13px;
}
.van-field__label {
  width: 7em;
}
.pull {
  font-size: 11.5px;
  color: #fe7003;
}
</style>
